<template>
  <div>
        <div class="mui-card">
			<div class="mui-card-header">Comment：</div>
			<div class="mui-card-content">
				<ul class="mui-table-view">
				    <li class="mui-table-view-cell mui-media"
                     v-for="item in commentList">
				    	<a href="javascript:;">
				    		<img class="mui-media-object mui-pull-left" :src="item.author.avatar">
				    		<div class="mui-media-body">
				    			{{item.author.name}} &nbsp 
                                <!-- {{item.created_at}} -->
				    			<p class='mui-ellipsis'>{{item.content?item.content:item.summary}}</p>
				    		</div>
				    	</a>
				    </li>
			    </ul>
			</div>
			<div class="mui-card-footer" @click="getComment (start=start+count,count=10)">
                加载更多...
            </div>
		</div>
  </div>
</template>

<script>
import {Toast} from 'mint-ui';

export default {
    data () {
        return {
            commentList:[],
            count:10,
            start:0,
            urlInfo: ''
        }
    },
    created () {
        this.getPathInfo ();
        this.getComment ();
    },
    methods: {
        getPathInfo () {
           let routeInfo  = this.typeId.type;
           if (routeInfo === "movie") {
              this.urlInfo = 'v2/movie/subject/' + this.typeId.id
           } else if (routeInfo === "book") {
              this.urlInfo = 'v2/book/isbn/'+ this.typeId.id
           }
        },
        getComment (start=0,count=10) {
            this.$http.get(this.urlInfo +"/comments?start="+start+"&count=" + count).then(result=>{
                this.commentList = this.commentList.concat(result.body.comments) 
                
                if (result.body.comments.length === 0 && this.start !== 0) {
                    Toast('没有更多评论了')
                }
                console.log(result)
            }).catch((err)=>{
                Toast('请求超时')
                console.log(err)
            })
        }
    },
    props:{
        typeId: {
           id : '',
           type : '',
        }
    }
}
</script>

<style lang="scss" scoped>
    .mui-card-header{
        color: #666;
    }
</style>